<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>个人主页-好友查询结果</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!-- 引入字体 -->
	<script th:src="@{/js/libs/webfontloader.min.js}"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
	<!-- 引入主要 css -->
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}">
</head>

<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
	<div class="preloader">
		<svg width="45" height="45" stroke="#fff">
			<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="8">
					<animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
							 values="6;1;2;3;4;5;6"/>
				</circle>
			</g>
		</svg>
		<div class="text">Loading ...</div>
	</div>
</div>
<!-- ... end Preloader 结束预加载-->

<!-- Fixed Sidebar Left 左侧菜单 -->
<div th:replace="common/sidebar_left :: sidebar"></div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->

<!-- Header-BP 头部导航栏-->
<div th:replace="common/headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--end头部空间-->

<!-- Top Header-Profile 个人主页头部-->
<div th:replace="common/headerProfile :: headerProfile"></div>
<!-- ... end Top Header-Profile 结束个人主页头部-->

<!--个人主页-好友主体头部-->
<div class="container">
    <div class="row">
        <div class="col col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
            <div class="ui-block responsive-flex">
                <div class="ui-block-title">
					<!--数据：好友数-->
                    <div class="h6 title">查询结果

					</div>
					<!--数据：搜索条件、返回结果-->
					<!--不需要就注释该表单-->

                    <form class="w-search" method="get" th:action="@{/search/user}">
                        <div class="form-group with-button">
                            <input class="form-control" type="text" placeholder="Search Friends...">
							<!--处理事件查询-->
                            <button>
                                <svg class="olymp-magnifying-glass-icon">
                                    <use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon"
									th:href="@{/svg-icons/sprites/icons.svg#olymp-magnifying-glass-icon}"></use>
                                </svg>
                            </button>
                        </div>
                    </form>


                </div>
            </div>
        </div>
    </div>
</div>
<!-- 结束个人主页-好友主体头部 -->

<!--个人主页-好友卡片列表-->
<div class="container">
    <div class="row">
		<!--单个好友卡片-->
		<!--数据：好友头像、昵称、个人主页链接、照片数、动态数-->

		<div class="col col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12" th:each="friend : ${theFriends}">
			<div class="ui-block">
				<div class="friend-item">
					<div class="friend-header-thumb">
						<!--默认背景-->
						<img th:src="@{/img/friend1.jpg}" alt="好友卡片背景">
					</div>
					<div class="friend-item-content">
						<div class="friend-avatar">
							<div class="author-thumb">
								<img style="width: 100px; height: 100px" th:src="@{${friend.headPhoto}}" alt="好友头像">
							</div>
							<div class="author-content">
								<a href="02-ProfilePage.html" th:href="@{/profilePage(userId=${friend.userId})}"
								   th:text="${friend.uname}" class="h5 author-name">Nicholas Grissom</a>
							</div>
						</div>
						<div class="friend-count">
							<div class="friend-count-item">
								<div class="h6">240</div>
								<div class="title">照片</div>
							</div>
							<div class="friend-count-item">
								<div class="h6">16</div>
								<div class="title">动态</div>
							</div>
						</div>
						<div class="control-block-button">
							<form th:method="get" th:action="@{/friendAsk/saveFriendAsk}">
								<input type="hidden" name="senderId" value="" th:value="${session.user.getUserId()}" />
								<input type="hidden" name="receiverId" value="" th:value="${friend.userId}" />
								<button class="accept-request bg-blue" title="加为好友">
									<svg class="olymp-happy-face-icon">
										<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"></use>
									</svg>
								</button>
							</form>
<!--							&lt;!&ndash;事件：删除好友&ndash;&gt;-->
<!--							<button class="accept-request bg-blue" title="删除好友">-->
<!--								<svg class="olymp-happy-face-icon">-->
<!--									<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"-->
<!--									th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>-->
<!--								</svg>-->
<!--							</button>-->
							<!--事件：私信-->
							<form method="post" th:action="@{/chat/{fid}/friend(fid=${friend.userId})}">
								<button class="accept-request bg-purple" title="私信" type="submit">
									<svg class="olymp-chat---messages-icon">
										<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-chat---messages-icon"
										th:href="@{/svg-icons/sprites/icons.svg#olymp-chat---messages-icon}"></use>
									</svg>
								</button>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--结束单个好友卡片-->

    </div>
</div>
<!-- 结束个人主页-好友卡片列表 -->
<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>

<!-- JS Scripts -->
<!--<div th:replace="_fragment :: footer"></div>-->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"	></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>

<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>

<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>

</body>

</html>